<!--
 * @author: 十一
 * @since: 2024-08-27
 * permissions-manage.vue
 * @desc: new page
-->
<template>
    <!-- <a-card> 菜单管理（待完善） 🍓🍇🍈🍉 </a-card> -->
      <a-row>
        <a-col :span="4" v-for="(item, index) in iconClasses.glyphs" :key="index">
          <div
            class="icon-item flex items-center flex-col p-5 pt-2 pb-2"
            :class="activeIndex === index ? 'activeClass' : ''"
            @click="handleClick(item.font_class,index)"
          >
            <i :class="'iconfont icon-' + item.font_class"></i>
            <span class="mb-2">{{ item.name }}</span>
            <span>icon-{{ item.font_class }}</span>
          </div>
        </a-col>
      </a-row>
  </template>
  
  <script lang="ts" setup>
  import iconClasses from "@/assets/icons/iconfont.json";
  import { ref } from "vue";
  const activeIndex = ref(0);

  const emit = defineEmits(['send-data']);
  const handleClick = (font_class:any,index:number)=>{
    emit('send-data', `icon-${font_class}`);
    activeIndex.value = index;
  }
  </script>
  
  <style scoped>
  .icon-item {
    border: 1px solid #f2f2f2;
    margin: 5px;
    cursor: pointer;
  }
  .icon-item:hover {
    background: #f2f2f2;
    color: #409eff;
  }
  .iconfont {
    font-size: 36px;
  }
  .activeClass {
    background: #f2f2f2;
    color: #409eff;
  }

  </style>
  